function main() {
	var ctx = document.getElementById('canvas').getContext('2d');
	draw_background(ctx, '#99cc33');
	ctx.strokeStyle="white";
	ctx.fillStyle="white";
	draw_polygon(ctx, [point(300,300), 
						point(400,200), 
						point(500,300)]);
	draw_polygon(ctx, [point(300,400), 
						point(500,400), 
						point(450,500), 
						point(350,500)], 
					true);
	ctx.setLineDash([3, 3]);
	draw_circle(ctx, point(400, 350), 50);  
}

function point(x, y) {
	return {x:x, y:y}
}

function draw_line(ctx, p1, p2) {
	ctx.beginPath();
	ctx.moveTo(p1.x,p1.y);
	ctx.lineTo(p2.x,p2.y);
	ctx.stroke();
}

function draw_circle(ctx, p, r, fill) {
	ctx.beginPath()
	ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
	if(fill) {
		ctx.fill();
	} else {
		ctx.stroke();
	}
}

var CANVAS_W = 800;
var CANVAS_H = 600;

function draw_background(ctx, color) {
	ctx.fillStyle=color;
	ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
}

function draw_polygon(ctx, points, fill) {
	if(points.length > 2) { 
		var i;
		var p = points[0];
		ctx.beginPath();
		ctx.moveTo(p.x, p.y);
		for(i = 1; i < points.length; ++i) {
			p = points[i];
			ctx.lineTo(p.x, p.y);
		}
		ctx.closePath();
		if(fill) {
			ctx.fill();
		} else {
			ctx.stroke();
		}
	}
}
